<template>
  <base-layout :layout-config="layoutConfig">
    <template #slotLayoutAppBar>
      头部区域
    </template>

    <template #slotLayoutMain>
      <v-container class="loginContainer pa-2">
        <div class="pa-2">
          <v-subheader class="loginTitle">
            <h1>{{ $t('views.login.login.system') }}</h1>
            <!-- <lang-select></lang-select> -->
            <!-- <toggle-lang></toggle-lang> -->
          </v-subheader>
          <form-component
            ref="loginForm"
            :form-show="true"
            :form-data="loginForm"
            :form-options="loginFormConfig.formOptions"
            :form-item="loginFormConfig.itemConfig"
            :form-config="loginFormConfig"
            @formBtnCB="formBtnCB"
          />
          <!-- <form-component
            ref="loginForm"
            :form-data="loginForm"
            :form-config="loginFormConfig"
            @formBtnCB="formBtnCB"
          /> -->
        </div>
      </v-container>
    </template>

    <template #slotLayoutFooterBar>
      底部区域
    </template>
  </base-layout>
</template>

<script>
import BaseLayout from '@/components/BaseComponents/BaseLayout/index'
import FormComponent from '@/components/BaseComponents/FormCompoent/FormComponent.vue'
// import ToggleLang from '@/components/i18N/ToggleLang.vue'
// import LangSelect from '@/components/LangSelect/LangSelect.vue'

import { isRequired } from 'utils/validate'
import { mapGetters } from 'vuex'
import { addDynamicRoutes } from '@/router/permission'

export default {
  // 登录页
  name: 'Login',

  components: {
    BaseLayout,
    FormComponent
    // ToggleLang,
    // LangSelect
  },

  data() {
    return {
      layoutConfig: {
        appBarConfig: { height: 120, color: '#eee', flat: true },
        footerBarConfig: { height: 60, color: '#eee', flat: true }
      },
      loginFormConfig: {
        formOptions: {
          fluid: false,
          class: 'text-center'
        },
        itemConfig: [
          {
            label: this.$t('views.login.login.username'),
            prop: 'username',
            type: 'text',
            rules: [isRequired],
            formShow: true,
            span: 12
            // class: 'justify-start'
            // solo: true,
            // outlined: true,
          },
          {
            label: this.$t('views.login.login.password'),
            prop: 'password',
            type: 'password',
            formShow: true,
            span: 12,
            rules: [isRequired]
            // solo: true,
            // outlined: true,
          }
        ],
        formOperation: {
          cancelBtnShow: false,
          saveBtnShow: false,
          buttonList: [
            {
              title: this.$t('btn.login'),
              block: true,
              color: 'primary',
              method: 'login',
              class: 'loginBtn'
            }
          ]
        }
      },
      loginForm: {}
      // 当前屏幕宽
      // screenWidth: '',
      // 当前屏幕高
      // screenHeight: ''
    }
  },

  computed: {
    ...mapGetters(['isPC', 'screenWidth', 'screenHeight'])
  },

  watch: {
    screenWidth() {
      // 屏幕改变时重设置宽度
      this.setFormTitleWidth()
    }
  },

  created() {},

  mounted() {
    // console.log(this.$message)
    // this.$message.success('success1111111111')
    // this.$message.success('success2')
    // this.screenWidth = document.body.clientWidth
    // this.screenHeight = document.body.clientHeight
    // window.onresize = () => {
    //   return (() => {
    //     this.$store.dispatch('screen/getEquipmentInfo')
    //     // this.screenWidth = document.body.clientWidth
    //     // this.screenHeight = document.body.clientHeight
    //   })()
    // }
    this.setFormTitleWidth()
    window.addEventListener('keydown', this.enterLogin)
  },

  destroyed() {
    window.removeEventListener('keydown', this.enterLogin, false)
  },

  methods: {
    // 设置登录表单title宽度
    setFormTitleWidth() {
      // 获取动态表单节点
      const formDom = document.getElementsByClassName('v-form')
      // 获取动态表单Title节点
      const formTitleDom = document.getElementsByClassName('loginTitle')
      // 定义 formTitle 宽度
      formTitleDom[0].style.width = formDom[0].clientWidth + 'px'
    },

    formBtnCB(methodName, el) {
      this[methodName](el)
    },

    login() {
      const validate = this.$refs.loginForm.$refs.formComponent.validate()
      if (validate) {
        this.$store.dispatch('user/login', this.loginForm).then(() => {
          addDynamicRoutes()
          this.$router.push('/')
        })
      }
    },

    enterLogin(e) {
      // 如果是回车则执行登录方法
      if (e.keyCode === 13) {
        this.login()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.loginContainer {
  height: 100%;
  align-items: center;
  justify-content: center;

  & > div:first-child {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .loginTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    & {
      > div {
        position: absolute;
        right: 0px;
      }
      // div:first-child {
      // }
    }
    // ::v-deep .v-btn {
    //   position: absolute;
    //   right: 0px;
    // }
  }
}
</style>
